<template>
<!-- 告警页面的弹窗 -->
  <div class="alarm-dialog">
    <div v-if="selectBarVisable" class="selectBar">
      <div class="select-item">
        <el-select v-model="branch_number" :disabled="!!$route.query.branch_number" clearable size="mini" placeholder="门店" @change="changeAlarmList">
          <el-option
            v-for="item in branchList"
            :key="item.branch_number"
            :label="item.branch_name"
            :value="item.branch_number"
          ></el-option>
        </el-select>
      </div>
      <div class="select-item">
        <el-select v-model="device_type" clearable size="mini" placeholder="设备类型" @change="changeAlarmList">
          <el-option
            v-for="item in deviceList"
            :key="item.device_type"
            :label="item.name"
            :value="item.device_type"
          ></el-option>
        </el-select>
      </div>
      <div class="select-item">
        <el-select v-model="status" clearable size="mini" placeholder="处理状态" @change="changeAlarmList">
          <el-option
            v-for="item in dealStatusMaps"
            :key="item.key"
            :label="item.value"
            :value="item.key"
          ></el-option>
        </el-select>
      </div>
      <div class="select-item">
        <el-select v-model="except_level" clearable size="mini" placeholder="告警等级" @change="changeAlarmList">
          <el-option
            v-for="item in except_levels"
            :key="item.key"
            :label="item.value"
            :value="item.key"
          ></el-option>
        </el-select>
      </div>
      <div class="pickTime">
        <date-range-picker
          @passDate="passAlarmDate"
          :clearbtn="true"
          :startTime="dateRange[0]" :endTime="dateRange[1]"
        />
      </div>
    </div>
    <div class="table_data">
      <el-scrollbar style="height:100%">
      <el-table :data="tableData" stripe style="width: 100%;" row-key="alarm_id">
        <el-table-column
          prop="branch_name"
          label="门店"
          width="180"
          show-overflow-tooltip
        >
          <template slot-scope="{row}">
            <div :class="{'error': getStatus(row.status).key === 0 || getStatus(row.status).key === 5}">
              {{row.branch_name}}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="attime" show-overflow-tooltip label="告警开始时间" width="180">
          <template slot-scope="{row}">
            <div :class="{'error': getStatus(row.status).key === 0 || getStatus(row.status).key === 5}">
              {{format(row.attime*1000, 'YYYY-MM-DD HH:mm:ss')}}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="alias"
          label="设备"
          width="220"
          show-overflow-tooltip
        >
          <template slot-scope="{row}">
            <div class="ellipCount" :class="{'error': getStatus(row.status).key === 0 || getStatus(row.status).key === 5}">
              {{row.alias}}
            </div>
          </template>
        </el-table-column>
        
        <el-table-column prop="except_reason" label="告警原因" show-overflow-tooltip>
          <template slot-scope="{row}">
            <div class="ellipCount" :class="{'error': getStatus(row.status).key === 0 || getStatus(row.status).key === 5}">
              {{row.except_reason}}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="except_level" label="等级" align="center" width="80">
          <template slot-scope="{row}">
            <div :class="{'error': getStatus(row.status).key === 0 || getStatus(row.status).key === 5}">
              {{except_levels.find(item => item.key === row.except_level).txt}}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="处理状态" width="80" align="center">
          <template slot-scope="{row}">
            <div :class="getStatus(row.status).className">
              {{getStatus(row.status).value}}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="80" align="center">
          <template slot-scope="{row}">
            <div v-if="getStatus(row.status).key === 0 || getStatus(row.status).key === 5" class="error pointer" @click="openDeal(row, '处理告警')">
              处理告警
            </div>
            <div v-else class="primary pointer" @click="openDeal(row, '查看详情')">
              查看详情
            </div>
          </template>
        </el-table-column>
      </el-table>
      </el-scrollbar>
    </div>
    <pagina-tion
      v-show="total>=0"
      :background="true"
      :total="total"
      :offset.sync="offset"
      :limit.sync="limit"
      @pagination="getChangePage"
    />
    <deal-dialog v-if="dealVisable" :title="dealTitle" :dealObj="dealObj" @close="closeDeal"/>
  </div>
</template>

<script>
import {
  format
} from 'silly-datetime'
import * as api from '@/api'
import { project_id, limit } from '@/consts/consts'
import { dealStatusMap,dealStatusMaps, except_levels } from '@/consts/codeMaps'
import { getLocaltodyString } from '@/utils/timeUtil.js'
const dateStart = getLocaltodyString()
export default {
  data() {
    return {
      format,
      selectBarVisable: false,
      branch_number: this.$route.query.branch_number,
      device_type: '',
      except_level: '',
      status: this.$store.state.alarmStatus,
      dateRange: this.$store.state.alarmDateRange,
      branchList: [],
      deviceList: [],
      total: 0,
      offset: 0,
      limit,
      dealStatusMap,
      dealStatusMaps,
      except_levels,
      tableData: [],
      dealVisable: false,
      dealTitle: '',
      dealObj: {}
    };
  },
  watch: {
    // dateRange(val) {
    //   this.alarmList()
    // }
  },
  methods: {

    clearSearch() {
      const names = ['alarmBranchName', 'alarmStatus', 'alarmDeviceType', 'alarmExceptLevel']
      names.forEach(item => {
        this.$store.commit('setState', {
          name: item,
          value: ''
        })
      })
      // this.$store.commit('setState', {
      //   name: 'alarmDateRange',
      //   value: []
      // })
    },

    setVal() {
      if (this.$store.state.alarmBranchName) {
        this.branch_number = this.branchList.find(item => item.branch_name === this.$store.state.alarmBranchName).branch_number
      }
      if (this.$store.state.alarmExceptLevel) {
        if (typeof this.$store.state.alarmExceptLevel === 'number') {
          this.except_level = this.$store.state.alarmExceptLevel
        } else {
          this.except_level = except_levels.find(item => item.value === this.$store.state.alarmExceptLevel).key
        }
      }
      if (this.$store.state.alarmDeviceType) {
        this.device_type = this.deviceList.find(item => item.name === this.$store.state.alarmDeviceType).device_type
      }
      if (this.$store.state.alarmDateRange.length === 2) {
        this.dateRange = this.$store.state.alarmDateRange
      }
      this.selectBarVisable = true
    },

    passAlarmDate (args) {
      this.dateRange = args
      this.alarmList()
    },

    getStatus(status) {
      return dealStatusMap.find(item => item.key === status)
    },

    getChangePage(val) {
      this.offset = val.offset
      this.alarmList()
    },
    
    openDeal(row, title) {
      this.dealTitle = title
      this.dealObj = row
      this.dealVisable = true
    },

    closeDeal() {
      this.dealVisable = false
      this.alarmList()
    },
    // 告警详情入参
    getParamsData() {
      const dateRange = this.dateRange === null ? [] : this.dateRange
      const [start = '', end = ''] = dateRange
      let data = {
        project_id,
      }
      if (this.branch_number) {
        data.branch_number = this.branch_number
      }
      if (this.device_type) {
        data.device_type = [this.device_type]
      }
      if (typeof this.status === 'number' && this.status === 0) {
        data.status = [this.status, 5]
      }else if (typeof this.status === 'number' && this.status === 2) {
        data.status = [this.status]
      }
      if (typeof this.except_level === 'number') {
        data.except_level = this.except_level
      }
      if (start) {
        data.time_start = format(start, 'YYYY-MM-DD')
      }
      if (end) {
        data.time_end = format(end, 'YYYY-MM-DD')
      }
      return data
    },

    // 门店总数
    async branchStat() {
      const { code, data } = await api.device.branchStat({
        project_id,
        offset: 0,
        limit: -1
      })
      if (code === 0) {
        this.branchList = data
        this.collectionList()
      }
    },

    async collectionList() {
      const { code, data } = await api.device.collectionList({
        project_id,
        offset: 0,
        limit: -1
      })
      if (code === 0) {
        this.deviceList = data
        this.setVal()
        this.alarmList()
      }
    },
    // 下拉筛选
    changeAlarmList() {
      this.offset = 0
      this.alarmList()
    },
    // 告警列表
    async alarmList() {
      const paramsData = this.getParamsData()
      const { code, data, total } = await api.alarmmanage.alarmList({
        offset: this.offset,
        limit
      }, paramsData)
      if (code === 0) {
        this.tableData = data
        this.total = total
      }
    },

  },
  created() {
    console.log('带过来的时间+++++',this.dateRange)
    this.branchStat()
  },
  beforeDestroy() {
    this.clearSearch()
  }
};
</script>

<style lang="stylus">
.alarm-dialog {
  .selectBar {
    display: flex;
    justify-content: space-around;
    margin-top: getPx(30);
    .select-item {
      margin-right:getPx(10);
      width: getPx(160);
      .el-select {
        width: 100%;
      }
    }
  }

  .pickTime {
    width: 260px;
  }

  .table_data {
    margin-top: getPx(15);
    height:getPx(545);
  }
  
  @media screen and (max-height:$h){
    .table_data {
      height:getPx(565);
      overflow-y:auto;
    }
  }
}
</style>